<template>
  <div>
    <el-form v-loading="loading" label-width="100px">
      <el-form-item label="学生名称">
        <el-input v-model="form.nickname" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item label="学生手机号">
        <el-input v-model="form.mobile" placeholder="请输入学生姓名"></el-input>
      </el-form-item>

      <el-form-item label="头像">
        <el-avatar v-if="form.avatar" :size="100" :src="form.avatar"></el-avatar>
        <el-upload :before-upload="beforeUpload" :on-change="uploadChange" :action="BASEURL + '/public/img'" :headers="{
            Authorization: 'Bearer ' + $store.state.user.remember_token
          }" name="file" :on-success="uploaded" :show-file-list="false">
          <el-button>+ 选择文件</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="form.sex">
          <el-option value="" label="请选择"></el-option>
          <el-option :value="0" label="男"></el-option>
          <el-option :value="1" label="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="所在城市">
        <!-- 省 -->
        <el-select @change="provinceSelected" v-model="form.province_id">
          <el-option v-for="v in province" :key="v.id" :value="v.id" :label="v.area_name"></el-option>
        </el-select>
        &nbsp;
        <!-- 城市 -->
        <el-select v-model="form.city_id">
          <el-option v-for="v in city" :key="v.id" :value="v.id" :label="v.area_name"></el-option>
        </el-select>
        &nbsp;
        <!-- 地区 -->
        <el-select v-model="form.district_id">
          <el-option v-for="v in area" :key="v.id" :value="v.id" :label="v.area_name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="save" type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { BASEURL } from "../../api";
export default {
  data() {
    return {
      BASEURL,
      loading: false,
      id: this.$route.query.id,
      form: {
        nickname: "",
        mobile: "",
        avatar: "",
        sex: "",
        birthday: "",
        province: "",
        city: "",
        district: "",
        // 绑定到表单中的三个下拉框，用来获取选中的ID
        province_id: "",
        city_id: "",
        district_id: "",
      },
      // 保存所有的省、市、地区的数据
      province: [],
      city: [],
      area: [],
    };
  },
  // 当页面创建完之后执行
  created() {
    // 如果有ID就根据ID查询用户信息
    if (this.id) {
      axios.get("/user/" + this.id).then((res) => {
        if (res) {
          this.form.nickname = res.data.nickname;
          this.form.mobile = res.data.mobile;
          this.form.avatar = res.data.avatar;
          this.form.sex = res.data.sex;
          this.form.birthday = res.data.birthday;
          this.form.province = res.data.province;
          this.form.city = res.data.city;
          this.form.district = res.data.district;
        }
      });
    }

    // 取出所有的省份
    axios.get("/sonArea/0").then((res) => {
      if (res) {
        this.province = res.data;
      }
    });
  },
  methods: {
    // 当选择了一个省份时
    provinceSelected() {
      // 根据省份的ID取出城市
      axios.get("/sonArea/" + this.form.province_id).then((res) => {
        if (res) {
          this.city = res.data;
        }
      });
    },
    // 上传头像前
    beforeUpload() {
      this.loading = true;
    },
    // 上传完成后（无论成功、失败都调用）
    uploadChange() {
      this.loading = false;
    },
    // 上传完头像调用
    uploaded(res) {
      if (res.code === 200) {
        // 把上传之后的路径保存到表单中
        this.form.avatar = res.data.path;
      }
    },
    save() {
      // 如果有ID就是修改
      if (this.id) {
        axios.put("/user/" + this.id, this.form).then((res) => {
          if (res) {
            this.$router.push({ name: "UserStudent" });
          }
        });
      } else {
        // 没有ID就是添加
        axios.post("/user", this.form).then((res) => {
          if (res) {
            this.$router.push({ name: "UserStudent" });
          }
        });
      }
    },
  },
};
</script>
